<template>
  <div class="license-container">
    <div class="button-wrap">
      <el-button type="text" @click="addData" v-if="!disabled">增加许可</el-button>
    </div>
    <el-card class="box-card" v-for="(item, index) in dataList" :key="index">
      <div class="button-wrap">
        <el-button type="text" @click="remove(index)" style="color: red"
                   v-if="!disabled">删除</el-button>
      </div>
      <el-form
        label-width="150px"
        :model="item"
        :rules="rules"
        ref="form"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="许可类别" prop="permitType">
              <el-select v-model.trim="item.permitType" style="width: 100%" placeholder="请选择许可类别"
                         :disabled="disabled">
                <el-option v-for="dict in dict.type.enterprise_permit_type" :key="dict.value" :value="dict.value"
                           :label="dict.label">{{dict.label}}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="许可编号" prop="permitCode">
              <el-input v-model.trim="item.permitCode" maxlength="50" placeholder="请输入许可编号"
                        :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="许可名称" prop="permitName">
              <el-input v-model.trim="item.permitName" maxlength="50" placeholder="请输入许可名称"
                        :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="许可有效开始时间" prop="effectiveStartDate">
              <el-date-picker
                v-model="item.effectiveStartDate"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="请选择许可有效开始时间"
                :disabled="disabled">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="许可有效结束时间" prop="effectiveEndDate">
              <el-date-picker
                v-model="item.effectiveEndDate"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="请选择许可有效结束时间"
                :disabled="disabled">
                <!-- :picker-options="endTimeOptions" -->
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="许可证" prop="fileInfoRequestList">
              <MyDtFileUpload
                v-model="item.fileInfoRequestList"
                :fileType="[]"
                :fileLimit="3"
                :fileSize="50"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                maxlength="50"
                :rows="2"
                v-model.trim="item.remark"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { handleFile } from '../../utils'
import MyDtFileUpload from '../dt-fileUpload'

export default {
  components: { MyDtFileUpload },
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  dicts: ['enterprise_permit_type'],
  data() {
    return {
      form: {},
      rules: {
        permitType: [{ required: true, trigger: 'change', message: '请选择许可类别' }],
        permitCode: [{ required: true, trigger: 'blur', message: '请输入许可编号' }],
        permitName: [{ required: true, trigger: 'blur', message: '请输入许可名称' }],
        effectiveStartDate: [{ required: true, trigger: 'change', message: '请选择许可有效开始时间' }],
        effectiveEndDate: [{ required: true, trigger: 'change', message: '请选择许可有效结束时间' }]
        // fileInfoRequestList: [{ required: true, trigger: 'change', message: '请上传许可证' }]
      },
      dataList: [
        {
          permitType: '',
          permitCode: '',
          permitName: '',
          effectiveStartDate: '',
          effectiveEndDate: '',
          fileInfoRequestList: [],
          remark: ''
        }
      ],
      // uploadUrl: `${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/uploadfile?secretFlag=N`,
      fileType: ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg']
    }
  },
  methods: {
    echoData(data) {
      this.dataList = data.map((item) => {
        item.fileInfoRequestList = item.fileInfoList.map((file) => {
          return handleFile(file)
        })
        return item
      })
    },
    remove(i) {
      if (this.dataList.length <= 1) {
        this.$message.warning('至少保留一条数据')
        return
      }
      this.dataList.splice(i, 1)
    },
    addData() {
      const obj = {
        permitType: '',
        permitCode: '',
        permitName: '',
        effectiveStartDate: '',
        effectiveEndDate: '',
        fileInfoRequestList: [],
        remark: ''
      }
      this.dataList.push(obj)
    },
    init() {
      this.form = {}
      this.dataList = [
        {
          permitType: '',
          permitCode: '',
          permitName: '',
          effectiveStartDate: '',
          effectiveEndDate: '',
          fileInfoRequestList: [],
          remark: '',
          fileList: []
        }
      ]
      this.$refs.form.forEach((item) => {
        item.resetFields()
      })
    },
    submit() {
      return this.dataList
    },
    validate() {
      const arr = []
      const nowTime = new Date().getTime()
      this.$refs.form.forEach((item) => {
        item.validate((result) => {
          arr.push(result)
        })
      })

      const state = this.dataList.every((item) => {
        const endTime = new Date(item.effectiveEndDate).getTime()
        return isNaN(endTime) || endTime > nowTime
      })
      if (!state) {
        setTimeout(() => {
          this.$message.warning('许可证有效期结束日期应该在当前时间之后')
        }, 100)
        return state
      }
      return arr.every((item) => item)
    }
  }
}
</script>

<style lang="scss" scoped>
.license-container {
  .box-card {
    margin-bottom: 30px;
  }

  .button-wrap {
    text-align: right;
  }
  .upload-demo {
    text-align: left;
  }
  .upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
  }

  .upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
  }
  ::v-deep .el-upload__tip {
    line-height: 16px;
  }
}
</style>
